<script lang="ts" setup>
import { getOSSURL } from "@/utils/utils";

const porps = defineProps({
  spu: {
    type: Object as PropType<ListProductSpu>,
    required: true,
  },
});

const price = computed(() => {
  return porps.spu.salePrice / 100;
});
</script>

<template>
  <div class="bg-white rd-3 of-hidden shadow">
    <nut-image class="shrink-0 w-full" :src="getOSSURL(spu.coverUrl)" />
    <div class="p-3">
      <div class="flex items-center gap-2 truncate">
        <!-- vip -->
        <span class="px-2 py-0.5 bg-blue-5 c-white font-b font-ys text-xs rd-1">VIP</span>
        <!-- 商品名称 -->
        <span class="text-lg">{{ spu.spuName }}</span>
      </div>
      <div class="mt-1 grow text-sm c-gray">{{ spu.spuDesc }}</div>
      <div class="flex justify-between items-end">
        <!-- 标签 -->
        <div v-if="spu.tags?.length" class="flex flex-wrap gap-3 items-center">
          <span v-for="tag in spu.tags" :key="tag" class="px-2 py-0.5 text-xs c-blue-5 b-1.5 b-solid b-blue-3 rd-1.5">{{ tag }}</span>
        </div>
        <span class="text-sm c-blue-5"
          >￥<span class="text-2xl">{{ price }}</span></span
        >
      </div>
    </div>
  </div>
</template>
